import React,{Component} from 'react';


import { Layout }  from 'antd';
import {Switch,Route,Redirect,Link} from 'react-router-dom'
import NavBar    from '../../components/head/navBar.jsx'

import MyAsset   from './myAsset/index.jsx'
import Recharge  from './recharge/index.jsx'
import Operation from './operation/index.jsx'
import WithOut  from './withOut/index.jsx'
import BankCard  from './bankCard/index.jsx'
import {SwapRightOutlined} from '@ant-design/icons';

import './asset.less'


const { Header, Footer, Sider, Content } = Layout;

class Asset extends Component {
    constructor(props){
        super(props)
        this.state={
            
        }
    }
    render(){
        const props=this.props;// 主路由
        const leftListArr=[
            {path:"/asset/myasset",  name:"资产"},
            {path:"/asset/operation",name:"股票操盘"},
            {path:"/asset/recharge", name:"充值"},
            {path:"/asset/widthOut",name:"提现"},
            {path:"/asset/bankCard",name:"绑定银行卡"}
        ]
        let tnLeftarr=leftListArr.map((item,i)=>{
            if(this.props.location.pathname === item.path){
                item.cls="act-icon"
            }else{
                item.cls=""
            }
            return {
                path:item.path,
                name:item.name,
                cls:item.cls,
            }
        })
        return(
            <Layout style={{height:"100%"}}>
                    <NavBar props={props}></NavBar>
                    <Layout>
                        <Sider className="tn-asset-left-nav-list">
                            {
                                tnLeftarr.map((item,i)=>{
                                    return (
                                        <Link key={i} className={item.cls} to={item.path}>
                                            <span>{item.name}</span>
                                            <i className="icon">
                                            <SwapRightOutlined />
                                            </i>
                                        </Link>
                                    )
                                })
                            }
                        </Sider>
                        <Content>
                            <Switch>
                                <Route path="/asset/myasset"     component={MyAsset}/>
                                <Route path="/asset/operation"   component={Operation}/>
                                <Route path="/asset/recharge"    component={Recharge}/>
                                <Route path="/asset/widthout"    component={WithOut}/>
                                <Route path="/asset/bankCard"    component={BankCard}/>
                                <Redirect to="/asset/myasset" />
                            </Switch>
                        </Content>
                    </Layout>
            </Layout>
        )
    }
}


export default Asset;